<template>
	<div class="app-container">

		<section>
			<!--工具条-->
			<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
				<el-form :inline="true" :model="formInline" label-width="120px">
					<el-form-item>
						<el-button type="primary" @click.prevent="handleHistory">历史列表</el-button>

					</el-form-item>
					<!--<span style="font-size:20px;font-weight: bold; display:block;margin-bottom: 20px;text-align: center;">收货单</span>-->
					<div>
						<el-form-item label="订单号:">
							<el-input v-model="formInline.OrderVoucher" placeholder="订单号" onkeyup="value=value.replace(/[^\d]/g,'')"></el-input>
						</el-form-item>
						<el-form-item label="收货人:">
							<el-input v-model="formInline.Consignee" placeholder="收货人"></el-input>
						</el-form-item>
						<el-form-item label="供货商名称:">
							<el-select v-model="formInline.SupplierId" filterable placeholder="供货商名称" @change="getSupplierID">
								<el-option v-for="item in SupplierList" :key="item.SupplierId" :label="item.SupplierName" :value="item.SupplierId">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="收货状态:">
							<template>
								<el-select v-model="formInline.Status" placeholder="请选择">
									<el-option v-for="item in Status" :key="item.value" :label="item.label" :value="item.value">
									</el-option>
								</el-select>
							</template>
							<!--<el-input v-model="formInline.shipway" placeholder="发货方式"></el-input>-->
						</el-form-item>
					</div>
				</el-form>
			</el-col>
			<el-table :data="skulist" v-loading="skulistLoading" ref="multipleTable" border style="width: 100%; margin-top: 20px" tooltip-effect="dark" @selection-change="handleSelectionChange">
				<el-table-column type="selection" width="55">
				</el-table-column>
				<el-table-column prop="ProductId" label="商品ID" width="150" sortable align="center">
				</el-table-column>
				<el-table-column prop="SKUName" label="商品名称" align="center">
				</el-table-column>
				<el-table-column prop="SKUUnitNo" label="当前单价" align="center">
				</el-table-column>
				<el-table-column prop="SKUSalePrice" sortable label="实价" align="center">
				</el-table-column>
				<el-table-column prop="ConsignAmount" sortable label="收货数量" align="center">
					<template slot-scope="scope">
						<el-input-number v-model="scope.row.ConsignAmount" :min="1" size="mini"></el-input-number>
					</template>
				</el-table-column>
				<el-table-column prop="TaxRate" sortable label="税率" align="center">
				</el-table-column>
				<el-table-column prop="	Description" label="备注" align="center">
					<template slot-scope="scope">
						<el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="scope.row.Description">
						</el-input>
						<!--	<el-input-number v-model="scope.row.Odernumber" :min="1"></el-input-number>-->
					</template>
				</el-table-column>
			</el-table>
			<div style="margin-top: 20px">
				<el-button @click="toggleSelection(tableData)">全选</el-button>
				<el-button @click="toggleSelection()">取消选择</el-button>
				<el-button type="primary" @click.native="DeliverVisible = true">收货</el-button>
			</div>

			<el-dialog title="提示" :visible.sync="DeliverVisible" width="30%">
				<span>是否确认收货</span>
				<span slot="footer">
                    <el-button @click="DeliverVisible = false">取 消</el-button>
                    <el-button type="primary"  @click.native="addSubmit">确 定</el-button>
                
                </span>
			</el-dialog>
			<!--<el-pagination background layout=" prev, pager, next, jumper" @current-change="handleCurrentChange" :page-size="pageSize" :total="total" style="float:right ;margin-top: 10px;">
			</el-pagination>-->

		</section>

	</div>
</template>

<script>
	import { SKUList, GetAnySupplierList, WarehouseReceipt } from '@/api/api'
	import Config from "../../api/config";
	export default {
		data() {
			return {
				Status: [{
						value: 1,
						label: "已收货"
					},
					{
						value: 2,
						label: "未收货"
					},
					{
						value: 3,
						label: "拒收"
					},
					{
						value: 4,
						label: "部分收货"
					},
					{
						value: 5,
						label: "超额到货"
					},
				],
				SupplierList: [],
				lookskulist: [],
				formInline: {
					SupplierId: "",
					shipper: "",
					Status: "",
					ordervoucher: "",
					consignee: "",
					logisticsvoucher: '',
					shipaddress: ""
				},
				multipleSelection: [],
				DeliverVisible: false,
				lookLoading: false,
				lookFormVisible: false,
				addLoading: false,
				addFormVisible: false,
				list: [],
				page: 1,
				pageSize: 20,
				total: 10000000000,

				addForm: {},

				skulist: [],

			};
		},
		created() {
			this.getSkuList();
			this.GetAnySupplierList();
		},
		methods: {
			getSupplierID(val) {
				this.formInline.SupplierID = val;

			},
			//获取供货商列表
			GetAnySupplierList() {
				var self = this;
				var para = {
					//					sessionid: sessionStorage.getItem("sessionid")
				};
				para = {
					"": Base64.encode(JSON.stringify(para))
				};
				GetAnySupplierList(para).then((res) => {
					//										console.log(JSON.parse(Base64.decode(res.data.Data)))
					if(res.data.Status != 1) {
						this.$message({
							message: res.data.Description,
							type: 'error'
						});
						return;
					} else {
						self.SupplierList = JSON.parse(Base64.decode(res.data.Data));
					}
				})
			},
			//获取商品列表
			getSkuList() {
				var self = this;
				var para = {
					//					sessionid: sessionStorage.getItem("sessionid"),
					page: this.page,
					pagesize: this.pageSize,
					//					VoucherNo: this.warehoue.VoucherNo,	
				};
				this.skulistLoading = true;

				SKUList(para).then(res => {
					if(res.data.Status != 1) {
						this.$message({
							message: res.data.Description,
							type: 'error'
						});
						return;
					} else {
						var vdata = JSON.parse(Base64.decode(res.data.Data));
						console.log(vdata);
						var list = vdata.DataList;
						for(var item in list) {
							list[item].ConsignAmount = 1;
							list[item].Description = '';
						}
						self.skulist = list;
						self.total = vdata.TotalCount;
					}
					self.skulistLoading = false;

				})
			},
			addSubmit() {
				var self = this;

				if(!this.formInline.OrderVoucher) {
					this.$message({
						message: "请输入订单号",
						type: 'error'
					});
					self.DeliverVisible = false;
					return;
				}
				if(!this.formInline.Consignee) {
					this.$message({
						message: "请输入收货人",
						type: 'error'
					});
					self.DeliverVisible = false;
					return;
				}
				if(!this.formInline.SupplierId) {
					this.$message({
						message: "请选择供货商",
						type: 'error'
					});
					self.DeliverVisible = false;
					return;
				}
				if(!this.formInline.Status) {
					this.$message({
						message: "请选择收货状态",
						type: 'error'
					});
					self.DeliverVisible = false;
					return;
				}

				var list = self.Jsonspr;
				if(list.length < 1) {

					this.$message({
						message: "请选择收货商品",
						type: 'error'
					});
					self.DeliverVisible = false;
					return;
				}
				for(var item in list) {
					if(!list[item].ConsignAmount || list[item].ConsignAmount <= 0) {
						this.$message({
							message: "收货数量不能为空",
							type: 'error'
						});
						self.DeliverVisible = false;
						return;
					}
				}
				var para = {
					OrderVoucher: this.formInline.OrderVoucher,
					SupplierId: this.formInline.SupplierId,
					Consignee: this.formInline.Consignee,
					Status: this.formInline.Status,
					Jsonspr: this.Jsonspr,
				};
				// 先检查

				// 循环
				for(var item in this.Jsonspr) {
					this.Jsonspr[item].SupplierId = this.formInline.SupplierId;
				}

				console.log(para)
				WarehouseReceipt(para).then((res) => {
					if(res.data.Status != 1) {
						this.$message({
							message: res.data.Description,
							type: 'error'
						});
						return;
					} else {
						self.formInline.OrderVoucher = '';
						self.formInline.SupplierId = '';
						self.formInline.Consignee = '';
						self.formInline.Status = '';
						self.getSkuList();
						this.$message({
							message: res.data.Description,
							type: 'success'
						});

					}

				})

				self.DeliverVisible = false;
			},

			toggleSelection(rows) {
				if(rows) {
					rows.forEach(row => {
						this.$refs.multipleTable.toggleRowSelection(row);
					});
				} else {
					this.$refs.multipleTable.clearSelection();
				}
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},

			handleSelectionChange(val) {
				console.log(val)
				this.Jsonspr = val;
			},

			//显示历史列表界面
			handleHistory: function() {
				//				this.addFormVisible = true;
				//				this.addForm = {}
				this.$router.push({
					path: '/Receiving/historylist'
				});
			},
		},

	};
</script>

<style>

</style>